<template>
	<view class="box">
	<view class="bigbox">
		<!-- 搜索框 -->
		<view class="searchbox">
			<image src="../static/o.png" mode=""></image>
			<input type="text" placeholder="股票 / 指数 / 板块名称或代码等关键词"/>
		</view>
		<!-- bar -->
		<view class="stockbar">
			<view class="stockbar-count" v-for="item in stockbars" :key="item.title">
				<image :src="item.img" ></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		
		<!-- 下面那个图 -->
		<view class="illustration">
			<image src="../static/gupiao.png" mode=""></image>
			<text class="illustration-text-h1">随时随地查看股票</text>
			<text class="illustration-text-h2">雨点金融随处随身而行</text>
		</view>
		
		<!-- 市场总览 -->
		<view class="shichang">
			<text class="sc-h1">市场总览</text>
			<text class="sc-h2">查看更多</text>
		</view>
		<!-- 数据可视化 -->
		<view class="visual">
			<view class="visual-h1">
				<text class="visual-h1-1">上证指数</text>
				<text class="visual-h1-2">3404.66 - 58.40 - 1.69%</text>
			</view>
			<view class="visual-data">
				<text class="visual-data-h1">涨1738 / 涨停66</text>
				<text class="visual-data-h2">跌2296 / 跌停11</text>
				<view class="visual-line">
					<view class="red" :style="{width: redred}"></view>
					<view class="reds"></view>
					<view class="green" :style="{width: greengreen}"></view>
				</view>
				<!-- 什么啊 -->
				<view class="plate">
					<view class="plate-left">
						<view class="p-l-h1">
							<text>领涨板块</text>
							<view class="p-l-h1-box"></view>
						</view>
						<view class="p-l-h2">电力</view>
						<view class="p-l-h3">+2.67%</view>
						<view class="polyline">
							<image src="../static/zhexian.png" mode=""></image>
						</view>
						<view class="p-l-h4">
							<text style="color: black;">金山股份</text>
							<text>+10.16%</text>
						</view>
					</view>
					<view class="plate-right">
						<view class="p-r-one">
							<view class="p-l-h1">
								<text>市场热度</text>
								<view class="p-l-h1-box"></view>
							</view>
							<view class="p-r-h2">
								<text style="color: #007AFF;margin-right: 15rpx;">46</text>
								<text>市场人气较低</text>
							</view>
						</view>
						<view class="p-r-two">
							<view class="p-l-h1">
								<text>今日涨停</text>
								<view class="p-l-h1-box"></view>
							</view>
							<view class="p-r-h3">
								<text style="color: black;">顺控发展</text>
								<text>十连板</text>
							</view>
							<view class="p-r-h3">
								<text style="color: black;">顺博合金</text>
								<text>四连扳</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 今日热度 -->
				<view class="todayhot">
					<text class="today-1">今日热股</text>
					<text class="today-2">查看更多</text>
				</view>
				<view class="thing">
					<view class="thing-h1">
						<text class="thing-h1-left">西部利得事件驱动股票</text>
						<text class="thing-h1-right">51.73%</text>
					</view>
					<view class="thing-h2">
						<view class="thing-h2-left">
							<view class="t-h2-b">股票型</view>
							<text>671030</text>
						</view>
						<view class="thing-h2-right">
							近一年涨跌幅
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stockbars:[
				{"img":"../static/gupiaoicon.png","title":"极速开户"},
				{"img":"../static/iconhot.png","title":"今日热点"},
				{"img":"../static/iconcdz.png","title":"猜涨停"},
				{"img":"../static/iconcc.png","title":"持仓"}],
				
				// 这是控制红线绿线长度的,随便写的
				a:1000,
				b:2000,
				c:0
			}
		},
		onLoad(){
			
		},
		computed:{
			redred:{
				get(){
					return this.a/(this.a+this.b)*670+"px"
				}
			},
			greengreen:{
				get(){
					return this.b/(this.a+this.b)*670+"px"
				}
			}
			
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.box{
		width: 750rpx;
		background-color: white;
	}
.bigbox{
	width: 670rpx;
	margin: 0 auto;
	background-color: white;
}
.searchbox{
	width: 670rpx;
	background: #EAE5E5;
	border-radius: 36rpx;
	display: flex;
	margin-bottom: 24rpx;
	
}
.searchbox image{
	width: 40rpx;
	height: 40rpx;
	margin-left: 28rpx;
	margin-right: 16rpx;
}
.searchbox input{
	width: 550rpx;
	height: 28rpx;
	font-size: 20rpx;
	font-weight: 300;
	line-height: 44rpx;
	color: #919191;
}
.stockbar{
	width: 670rpx;
	height: 192rpx;
	padding-left: 40rpx;
	padding-right: 40rpx;
	padding-top: 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}
.stockbar-count{
	text-align: center;
	height: 140rpx;
}
.stockbar-count image{
	width: 88rpx;
	height: 88rpx;
	display: block; 
}
.stockbar-count text{
	font-size: 24rpx;
	font-weight: 400;
	line-height: 34rpx;
	color: #474747;
}
.illustration{
	width: 670rpx;
	height: 198rpx;
	border-radius: 24rpx;
	overflow: hidden;
	border:  1rpx solid;
	position: relative;
	margin-bottom: 48rpx;
}
.illustration image{
	width: 670rpx;
	height: 198rpx;
}
.illustration-text-h1{
	position: absolute;
	top: 60rpx;
	left: 45rpx;
	font-size: 32rpx;
	line-height: 44rpx;
	color: #FFFFFF;
}
.illustration-text-h2{
	position: absolute;
	top: 120rpx;
	left: 110rpx;
	font-size: 20rpx;
	font-weight: 300;
	line-height: 28rpx;
	color: #FFFFFF;
}
.shichang{
	width: 670rpx;
	height: 44rpx;
	display: flex;
	justify-content: space-between;
	margin-bottom: 54rpx;
}
.sc-h1{
	height: 44rpx;
	font-size: 32rpx;
	font-weight: 500;
	line-height: 44rpx;
	color: #161616;
}
.sc-h2{
	height: 34rpx;
	font-size: 24rpx;
	font-weight: 400;
	line-height: 34rpx;
	color: #474747;	
}
.visual{
	width: 670rpx;
}
.visual-h1{
	width: 670rpx;
	height: 34rpx;
	margin-bottom: 24rpx;
}
.visual-h1-1{
	height: 34rpx;
	font-size: 24rpx;
	line-height: 44rpx;
	color: #323232;
}
.visual-h1-2{
	height: 34rpx;
	font-size: 24rpx;
	line-height: 44rpx;
	color: #00A200;
	margin-left: 10rpx;
}
.visual-data{
	width: 670rpx;
	height: 50rpx;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 24rpx;
}
.visual-data-h1{
	width: 50%;
	height: 34rpx;
	text-align: left;
	color: red;
	font-size: 24rpx;
}
.visual-data-h2{
	width: 50%;
	height: 34rpx;
	text-align: right;
	color: #00A200;
	font-size: 24rpx;
}
.visual-line{
	width: 670rpx;
	height: 10rpx;
	display: flex;
	margin-bottom: 24rpx;
}
.red{
	width: 30%;
	border-top: 10rpx solid red ;
	border-right:10rpx solid white ;
}
.reds{
	width: 7%;
	height: 10rpx;
	background-color: red;
	transform: skewX(135deg);
	margin-left: 10rpx;
	margin-right: 10rpx;
}
.green{
	width: 67%;
	height: 10rpx;
	border-bottom: 10rpx solid green ;
	border-left:10rpx solid white ;
}
.plate{
	width: 670rpx;
	height: 335rpx;
	display: flex;
	justify-content: space-between;
	margin-bottom: 48rpx;
}
.plate-left{
	width:298rpx;
	height: 334rpx;
	background: #F5FAFF;
	border-radius: 12rpx;
		padding: 20rpx;
		box-sizing: border-box;
}
.p-l-h1{
	height: 44rpx;
	display: flex;
	margin-bottom: 15rpx;
}
.p-l-h1 text{
	font-size: 32rpx;
	font-weight: bold;
	line-height: 44rpx;
	color: #323232;
	
}
.p-l-h1-box{
	width: 20rpx;
	height: 20rpx;
	margin-top: 10rpx;
	margin-left: 20rpx;
	border-top: 4rpx solid #333333;
	border-right: 4rpx solid #333333;
	transform:rotate(45deg);
}
.p-l-h2{
	height: 44rpx;
	font-size: 32rpx;
	font-weight: 400;
	line-height: 44rpx;
	color: #474747;
	margin-bottom: 16rpx;
}
.p-l-h3{
	width: 298rpx;
	text-align: center;
	height: 62rpx;
	font-size: 52rpx;
	font-weight: 400;
	line-height: 44rpx;
	margin-bottom: 26rpx;
	text-align: center;
}
.polyline{
	width: 190rpx;
	height: 40rpx;
	margin: 0 auto;
	margin-bottom: 20rpx;
}
.polyline image{
	height: 40rpx;
	width: 190rpx;
}
.p-l-h4{
	height: 28rpx;
	font-size: 20rpx;
	font-weight: 300;
	line-height: 44rpx;
	color: #FD1515;
}
.plate-right{
	width: 348rpx;
	height: 334rpx;
	border-radius: 12rpx;
}
.p-r-one{
	width: 348rpx;
	height: 148rpx;
	background: #FFF6F1;
	border-radius: 12rpx;
	padding: 20rpx;
	box-sizing: border-box;
	margin-bottom: 24rpx;
}
.p-r-two{
	width: 348rpx;
	height: 162rpx;
	background: #FFF6F1;
	border-radius: 12rpx;
	padding: 20rpx;
	box-sizing: border-box;
}
.p-r-h2 text{
	height: 44rpx;
	font-size: 32rpx;
	font-weight: 400;
	line-height: 44rpx;
	color: #474747;
}
.p-r-h3{
	height: 34rpx;
	font-size: 24rpx;
	font-weight: 400;
	line-height: 34rpx;
	color: #FF6537;
}
.todayhot{
	width: 670rpx;
	height: 44rpx;
	display: flex;
	justify-content: space-between;
	margin-bottom: 24rpx;
}
.today-1{
	height: 44rpx;
	font-size: 32rpx;
	line-height: 44rpx;
	color: #161616;
}
.today-2{
	height: 34rpx;
	font-size: 24rpx;
	line-height: 34rpx;
	color: #474747;
	text-align:right;
}
.thing{
	width: 670rpx;
	height: 92rpx;
}
.thing-h1{
	width: 670rpx;
	display: flex;
	justify-content: space-between;
}
.thing-h1-left{
	height: 44rpx;
	font-size: 32rpx;
	line-height: 44rpx;
	color: #474747;
}
.thing-h1-right{
	height: 48rpx;
	font-size: 40rpx;
	font-weight: bold;
	line-height: 48rpx;
	color: #FF3A3A;
	text-align: right;
}
.thing-h2{
	display: flex;
	justify-content: space-between;
}
.thing-h2-left{
	display: flex;
}
.thing-h2-left text{
	height: 34rpx;
	font-size: 24rpx;
	line-height: 34rpx;
	color: #474747;
	margin-left: 5rpx;
}
.t-h2-b{
	
	height: 36rpx;
	border: 2rpx solid #4B70B6;
	border-radius: 22rpx;
	color: #4B70B6;
	padding-left: 16rpx;
	padding-right: 16rpx;
	line-height: 36rpx;
	font-size: 20rpx;
}
.thing-h1-right{
	height: 34rpx;
	font-size: 24rpx;
	font-weight: 400;
	line-height: 34rpx;
	color: #474747;
	text-align: right;
}
</style>
